<template>
	<view class="friend-group-page">
		<uni-nav-bar :border='false' @clickLeft='back()' color="var(--uni-text-color)" backgroundColor="transparent"
			:left-icon="isMobile && 'left' || ''" :leftText="isMobile && '返回' || ''"
			:title="model || groupId ? '邀请新成员' :'创建群聊'" />
		<sxran-im-content>
			<uni-search-bar bgColor="var(--uni-bg-color-grey)" textColor='var(--uni-text-color)'
				@confirm="onSearchInput" v-model="words" placeholder='请输入用户名/用户昵称' @input="onSearchInput">
			</uni-search-bar>
			<view class="friend-group-body">
				<sxran-im-list>
					<checkbox-group @change="checkboxChange">
						<template v-for="(item,index) in friensdsList">
							<view class="friend-group-item">
								<sxran-im-list-item :title='item.nick' :avatarText='item.nickname'
									:avatarUrl='item.avatar' :badge-text="0" :isDot='false' :isBadge="false"
									:key="index">
									<template v-slot:checkbox>
										<checkbox borderColor='var(--uni-border-color)'
											activeBorderColor='var(--uni-border-color)' backgroundColor='transparent'
											activeBackgroundColor='transparent' :value="item.userId"
											:checked="item.checkbox" />
									</template>
									<!-- <template v-slot:right>
									<view class="item-slot-rigt">
										<sxran-im-text text="同意" type='primary'></sxran-im-text>
										<sxran-im-text text="拒绝" type='info'></sxran-im-text>
									</view>
								</template> -->
								</sxran-im-list-item>
							</view>
						</template>
					</checkbox-group>
				</sxran-im-list>
			</view>
			<view class="friend-group-foot">
				<uni-button type="primary"
					@click="inputDialogToggle">{{ model || groupId ? '立即邀请' : '立即创建'}}</uni-button>
			</view>
		</sxran-im-content>
	</view>

	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="创建群聊" value="对话框预置提示内容!" placeholder="请输入群名称"
			@confirm="dialogInputConfirm">
			<view style="flex:1 0 0 ">
				<uni-section title="群昵称" type="line" padding>
					<uni-easyinput errorMessage v-model="name" focus placeholder="请输入内容" @input="input"></uni-easyinput>
				</uni-section>
				<uni-section title="群描述" type="line" padding>
					<uni-easyinput errorMessage v-model="introduction" focus placeholder="请输入内容"
						@input="input"></uni-easyinput>
				</uni-section>
			</view>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			model: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
				default: null
			}
		},

		data() {
			return {
				checkFriendIds: [],
				friensdsList: [],
				group_id: false,
				introduction: '',
				name: '',
				words: '',
				groupId: null,
			}
		},
		computed: {
			isMobile() {
				return uni.$u.isMobile()
			},
			groupInfos() {
				return uni.$Im.getGroupInfos();
			}
			// friensdsList() {
			// 	return uni.$Im.getFriensdsList();
			// }
		},
		async created() {
			await uni.$Im.getFriendsCmdMethods();
			this.friensdsList = uni.$Im.getFriensdsList()
				.filter(item => item.userId !== uni.$Im.getCurrentUserId())
				.map(item => ({
					...item,
					checked: false
				}));

		},
		emits:['close'],
		mounted(){
			if(this.id){
				this.groupId = this.id;
				this.getGroupUsers(this.groupId );
			}
			
		},
		onLoad(query) {
			this.groupId = query.groupId;
			this.getGroupUsers(this.groupId );
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async getGroupUsers(groupId ) {
				if (this.groupId) {
					await uni.$Im.getGroupInfosCmdMethods({
						groupId: groupId
					})
					const memberUserIds = new Set(this.groupInfos.memberList.map(user => user.userId));
					this.friensdsList = this.friensdsList.filter(item => !memberUserIds.has(item.userId));
				}
			},
			inputDialogToggle() {
				if (this.groupId) {
					const params = {
						group: {
							groupId: this.groupId,
							name: this.groupInfos.name,
							avatar: ''
						},
						users: this.checkFriendIds
					}
					this.createGroup(params);
				} else {
					this.$refs.inputDialog.open()
				}
			},
			dialogInputConfirm(message) {
				const params = {
					users: this.checkFriendIds,
					group: {
						groupId: this.groupId,
						name: this.name,
						avatar: uni.$Im.getCurrentUserAvatar(),
						introduction: this.introduction,
						join_option: 1
					},
				}
				this.createGroup(params);
			},
			checkboxChange(e) {
				console.log(e.detail.value)
				var items = this.friensdsList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.userId)) {
						item.checked = true;
					} else {
						item.checked = false;
					}
				}
				this.checkFriendIds = values;

			},
			createGroup(params) {
				uni.$Im.createGroup(params, (body) => {
					if (body.msg) {
						uni.showToast({
							title: body.msg,
							icon: 'none',
						})
						return;
					}
					if (this.groupId) {
						uni.$Im.getGroupInfosCmdMethods({
							groupId: this.groupId
						});
						if(this.isMobile){
							uni.navigateBack();
						}else{
							this.$emit('close')
						}
						
						// uni.redirectTo({
						// 	url: '/uni_modules/sxran-im-modules/pages/group-infos/group-infos'
						// })
					} else {
						if(this.isMobile){
							uni.redirectTo({
								url: '/uni_modules/sxran-im-modules/pages/group-chat/group-chat'
							})
						}else{
							this.$emit('change','group-chat')
						}
						
					}

					this.$refs.inputDialog.close();
				})
			},
			//防抖搜索
			onSearchInput: uni.$u.debounce(function(words) {
				this.words = words;
				const friensdsList = uni.$Im.getFriensdsList().filter(item => item.userId !== uni.$Im
					.getCurrentUserId());
				if (words) {
					this.friensdsList = friensdsList.filter(item => item.nick.toLowerCase().includes(words
						.toLowerCase()));
				} else {
					this.friensdsList = friensdsList.map(item => {
						return {
							...item,
							checked: false
						}
					});
				}
			}, 500)
		},
		watch: {
			id(n, o) {
				console.log(n, o, '*********************************')
			}
		},
	}
</script>

<style scoped lang="scss">
	.friend-group-page {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));
	}

	.friend-group-foot {
		padding: 10px;
	}

	.friend-group-body {
		flex: 1 0 0;
		overflow: hidden;

		.friend-group-item {
			// border-radius: $uni-border-radius-lg;
			overflow: hidden;

			// margin-bottom: $uni-spacing-col-lg;
			// display: flex;
			// flex-direction: row;
			:deep(.sxran-im-cell) {
				background-color: transparent;
			}
		}

		.item-slot-rigt {
			display: flex;
			flex-direction: row;

			.u-text {
				margin: 0 10px !important;
			}
		}


	}
</style>